<template>
    <div class="my-container">
        <van-cell-group v-if="user" class="my-info">
          <van-cell
          class="base-info"
           center
           :border="false"
        >
        <van-image
         class="avatar"
         slot="icon"
         round
         fit="cover"
         :src="currentUser.photo"
        />
        <div class="name" slot="title">{{ currentUser.name }}</div>
        <van-button
          class="update-btn"
          size="small"
          round
          to="/user/profile"
        >编辑资料</van-button>
          </van-cell>

          <van-grid class="data-info" :border="false">
            <van-grid-item class="data-info-item">
                <div class="text-wrap" slot="text">
                    <div class="count">{{ currentUser.art_count }}</div>
                    <div class="text">头条</div>
                </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
                <div class="text-wrap" slot="text">
                    <div class="count">{{ currentUser.follow_count }}</div>
                    <div class="text">关注</div>
                </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
                <div class="text-wrap" slot="text">
                    <div class="count">{{ currentUser.fans_count }}</div>
                    <div class="text">粉丝</div>
                </div>
            </van-grid-item>
            <van-grid-item class="data-info-item">
                <div class="text-wrap" slot="text">
                    <div class="count">{{ currentUser.like_count }}</div>
                    <div class="text">获赞</div>
                </div>
            </van-grid-item>
          </van-grid>
</van-cell-group>

<div v-else class="not-login">
    <div @click="$router.push({
        name: 'login',
        query: {
            redirect: '/my'
        }
    })">
        <img class="mobile" src="./unlogin-img.png">
    </div>
    <div class="text2">登录 / 注册</div>
</div>

<van-grid class="nav-grid mb-4" :column-num="2">
  <van-grid-item 
    class="nav-grid-item"
    icon-prefix="toutiao"
    icon="shoucang" 
    text="收藏" 
    to="/user/collect"
  />
  <van-grid-item
    class="nav-grid-item"
    icon-prefix="toutiao" 
    icon="lishi" 
    text="历史" 
    to="/user/history"
  />
</van-grid>

<van-cell
  title="消息通知"
  is-link
  to="/news"
/>
<van-cell
  class="mb-4"
  title="小智同学"
  is-link
  to="/user/chat"
/>
<van-cell
  v-if="user"
  class="logout-cell"
  title="退出登录"
  @click="onLogout"
/>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCurrentUser } from '@/api/user'
import { mapMutations } from 'vuex'

export default {
    name: 'MyIndex',
    components: {},
    props: {},
    data () {
        return {
            currentUser: {} //当前登录用户信息
        }
    },
    mounted(){
        // this.loadCurrentUser()
    },
    computed: {
        ...mapState(['user'])
    },
    watch: {},
    created () {
        this.loadCurrentUser()
    },
    mounted () {},
    methods: {
        async loadCurrentUser () {
            const { data } = await getCurrentUser()
            this.currentUser = data.data

            // this.$store.commit('SET_USERPHOTO', this.currentUser.photo)
            this.SET_USERPHOTO(this.currentUser.photo)
        },
        onLogout () {
            //提示用户确认退出
            // 确认 -> 处理退出
            this.$dialog.confirm({
                   title: '退出提示',
                   message: '确认退出码？'
                 })
                   .then(() => {
                     // on confirm
                    //  清楚用户登录状态
                    this.$store.commit('setUser', null)
                   })
                   .catch(() => {
                     // on cancel
                   })
                         },
                         ...mapMutations(['SET_USERPHOTO'])
    }
}
</script>

<style scoped>
.my-info{
    background: url(./banner.png) no-repeat;
    background-size: cover;
}
.base-info{
    box-sizing: border-box;
    height: 115px;
    background-color: unset;
    padding-top: 38px;
    padding-bottom: 11px;
}
.avatar{
    box-sizing: border-box;
    width: 66px;
    height: 66px;
    border: 1px solid #fff;
    margin-right: 11px;
}
.name{
    font-size: 15px;
    color: #fff;
}
.update-btn{
    height: 20px;
    font-size: 10px;
    color: #666666;
}
.data-info-item{
    height: 65px;
    color: #fff;
}
.count{
    font-size: 18px;
}
.text{
    font-size: 11px;
}
.text-wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.nav-grid{
    background-color: #fff;
}
.nav-grid-item{
    height: 70px;
}
/deep/.toutiao{
    font-size: 22px;
}
/deep/.toutiao-shoucang{
    color: #eb5253;
}
/deep/.toutiao-lishi{
    color: #ff9d1d;
}
/deep/.van-grid-item__content{
    background: unset;
}
/deep/.van-grid-item__text{
    font-size: 14px;
    color: #333333;
}
.logout-cell{
    text-align: center;
    color: #d86262;
}
.mb-4{
    margin-bottom: 4px;
}
.not-login{
    height: 180px;
    background: url("./banner.png") no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.mobile{
    width: 66px;
    height: 66px;
}
.text2{
    font-size: 14px;
    color: #fff;
}
</style>
